<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { getCategoryList } from '@/api' //导入axio接口
  import type { Category } from '@/model' //导入自定义数据类型

  //定义菜单列表数据对象
  const menuList = ref<Category[]>([])

  //获得菜单列表
  async function getMenuList(){
    const res = await getCategoryList()
    menuList.value = res.data.data
  }

  //页面组件加载完成
  onMounted(()=>{
    getMenuList()
  })
</script>

<template>
  <ul>
    <li v-for="item_p in menuList.filter((value:Category)=>value.pid==0 && value.id!=37).slice(0, 9)">
      {{ item_p.name }}
      <div class="layer">
        <div>分类推荐<span>根据您的购买或浏览记录推荐</span></div>
        <div>
          <div v-for="item_c in menuList.filter((value:Category)=>value.pid==item_p.id).slice(0, 9)">{{ item_c.name }}</div>
        </div>
      </div>
    </li>
  </ul>
</template>

<style scoped>
    ul{
        width:200px;
        height:100%;
        color:#FFFFFF;
        background-color:#000000;
        position:relative;
    }
    ul li{
        height:40px;
        line-height:40px;
        text-indent: 2em;
        cursor:pointer;
    }
    ul li:hover{
        background-color: #4799F4;
    }
    ul li:hover .layer{
      transform: scaleY(1);
    }
    .layer{
      background:rgba(255,255,255,0.8);
      width:1000px;
      height:350px;
      color:#000000;
      position:absolute;
      left:200px;
      top:0px;
      z-index: 1000;
      transform: scaleY(0);
      transition: all 0.3s ease;
    }
    .layer > div:first-child{
      font-size:20px;
      margin:20px auto 0px auto;
    }
    .layer > div:first-child span{
      color:#666666;
      font-size:14px;
      margin-left:5px;
    }
    .layer > div:last-child{
      display:flex;
      justify-content:flex-start;
      flex-wrap: wrap;
    }
    .layer > div:last-child > div{
      width:300px;
      height:70px;
      line-height: 70px;
      text-align:center;
      border-radius: 5px;
      background-color: #FFFFFF;
      text-indent: 0em;
      margin-left:25px;
      margin-top:20px;
      box-shadow: 2px 2px 2px 2px lightgray;
    }
    .layer > div:last-child > div:hover{
      background-color:#E3F9F4;
    }
</style>
